<template>
	<view class="bg_color">
		<view class="flex-col dnews">
			<view class="flex-col group_51">
				<!-- item -->
				<view @click="toDetail(item)" :key=i v-for="(item, i) in list">
					<view class="flex-col">
						<text class="text_6 text_58">{{item.name}}</text>
						<text class="text_6 text_59">{{item._add_time_str}}</text>
					</view>
					<text class="text_6 text_60">{{item.describe}}</text>
					<view class="right-section"> </view>
				</view>

			</view>
			<u-loadmore v-if="list != ''" icon-color="#D19A60" color="#D19A60" @loadmore="loadmore" margin-bottom="20"
				:load-text="loadText" :status="status" />
		</view>
	</view>
</template>

<script>
	var that;
	var vk;
	export default {
		data() {
			return {
				list: [],
				status: 'loadmore',
				pageSize: 10,
				pageIndex: 1,
				loadText: {
					loadmore: '点击或上拉加载更多',
					loading: '正在加载，请稍后...',
					nomore: '到底了'
				}
			}
		},
		onReachBottom() {
			if (this.status == 'nomore') return
			this.status = 'loading';
			this.pageIndex = ++this.pageIndex;
			this.loadmore(1);
		},
		onLoad() {
			that = this;
			vk = that.vk;
			that.loadmore()
		},
		methods: {
			toDetail(item) {
				vk.navigateTo('/pages/news-detail/news-detail?_id=' + item._id)
			},
			loadmore() {
				that.$api.news({
					pageIndex: that.pageIndex,						pageSize: that.pageSize
				}).then((data) => {
					if (data.code == 0) {
						if (!data.hasMore) {
							that.status = 'nomore'
						}
						that.list = that.list.concat(data.rows)
					} else {
						vk.toast('网络开小差了~')
					}
				}).catch((err) => {})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.dnews {
		margin-top: 10rpx;

		.group_51 {
			padding: 26rpx 30rpx 0;

			.text_60 {
				margin-right: 10rpx;
				margin-top: 16rpx;
				color: rgb(102, 102, 102);
				font-size: 20rpx;
				line-height: 35rpx;
				text-align: left;
			}

			.right-section {
				margin-top: 27rpx;
				margin-bottom: 27rpx;
				background-color: rgb(204, 204, 204);
				height: 2rpx;
			}

			.group_53 {
				margin-top: 29rpx;

				.text_61 {
					color: rgb(34, 34, 34);
					font-size: 24rpx;
					font-weight: 500;
					line-height: 33rpx;
					white-space: nowrap;
				}

				.text_62 {
					margin-top: 11rpx;
					color: rgb(153, 153, 153);
					font-size: 20rpx;
					font-weight: 200;
					line-height: 28rpx;
					white-space: nowrap;
				}
			}

			.text_63 {
				margin-top: 16rpx;
				color: rgb(102, 102, 102);
				font-size: 20rpx;
				line-height: 35rpx;
				text-align: left;
			}

			.button {
				align-self: center;
				color: rgb(209, 154, 96);
				font-size: 24rpx;
				line-height: 33rpx;
				white-space: nowrap;
				padding: 17rpx 0;
				background-color: rgb(255, 255, 255);
				box-shadow: 0px 10rpx 20rpx 0px rgba(0, 0, 0, 0.05);
				border-radius: 35rpx;
				border: solid 2rpx rgb(209, 154, 96);

				.text_14 {
					margin-left: 75rpx;
				}

				.image_7 {
					margin: 8rpx 75rpx 8rpx 10rpx;
					width: 10rpx;
					height: 16rpx;
				}
			}

			.section_15 {
				margin-top: 38rpx;
			}

			.text_58 {
				color: rgb(34, 34, 34);
				font-size: 24rpx;
				font-weight: 500;
				line-height: 33rpx;
				white-space: nowrap;
			}

			.text_59 {
				margin-top: 11rpx;
				color: rgb(153, 153, 153);
				font-size: 20rpx;
				font-weight: 200;
				line-height: 28rpx;
				white-space: nowrap;
			}
		}

		.group_50 {
			color: rgb(34, 34, 34);
			font-size: 28rpx;
			font-weight: 500;
			line-height: 40rpx;
			white-space: nowrap;

			.left-section {
				background-color: rgb(209, 154, 96);
				border-radius: 0px 6rpx 6rpx 0px;
				width: 6rpx;
				height: 31rpx;
			}

			.view_20 {
				margin-top: 20rpx;
			}

			.right-group {
				margin-left: 24rpx;
				width: 112rpx;
				position: relative;

				.image_38 {
					width: 53rpx;
					height: 58rpx;
				}

				.text_16 {
					position: absolute;
					left: 0;
					right: 0;
					top: 15rpx;
				}
			}
		}

		.text_57 {
			margin-left: 30rpx;
			color: rgb(153, 153, 153);
			font-size: 18rpx;
			font-weight: 200;
			line-height: 25rpx;
			white-space: nowrap;
		}

		.text_6 {
			text-transform: uppercase;
		}
	}
</style>
